import styles from './styles.less';
import {Button, Col, Form, Input, Row, Select} from 'antd';
import 'dayjs/locale/zh-cn';
import {connect} from 'umi';
import {filterValues} from '@/utils/utils';

const SearchForm = (props) => {

  const {submitting} = props;
  const {setTablePayload, tablePayload} = props.data;
  const [form] = Form.useForm();

  /* 搜索提交 */
  const onFinish = (values) => {
    setTablePayload({...tablePayload, pageNum: 1, param: {...filterValues(values)}});
  };

  /* 搜索重置 */
  const onReset = () => {
    form.resetFields();
    setTablePayload({...tablePayload, pageNum: 1, param: {}});
  };

  return (
    <Form form={form} labelCol={{span: 6}} className={styles.mySearchForm} onFinish={onFinish}>
      <Row gutter={12}>
        <Col span={6}>
          <Form.Item name={`name`} label={`用户名称`}>
            <Input placeholder='请输入用户名称'/>
          </Form.Item>
        </Col>
        <Col span={6}>
          <Form.Item name={`mobile`} label={`手机号码`}>
            <Input placeholder='请输入手机号码'/>
          </Form.Item>
        </Col>
        <Col span={6}>
          <Form.Item name={`status`} label={`当前状态`}>
            <Select placeholder='请选择当前状态'>
              <Select.Option value={'0'}>停用</Select.Option>
              <Select.Option value={'1'}>正常</Select.Option>
            </Select>
          </Form.Item>
        </Col>
        <Col span={6} style={{textAlign: 'right'}}>
          <Button type='primary' htmlType='submit' loading={submitting}>
            查询
          </Button>
          <Button style={{margin: '0 8px'}} onClick={() => onReset()}>
            重置
          </Button>
        </Col>
      </Row>
    </Form>
  );
};

export default connect(({loading}) => {
  return {
    submitting: loading.effects['POperationCampainSalers/fetchList'],
  };
})(SearchForm);
